<script setup>
import { ref, watch } from 'vue'
import { useMouseInElement } from '@vueuse/core'
import { useGoodsDetail } from './composables/useGoodsDetail.js'
import { useGoodsHot } from './composables/useGoodsHot.js'
import { ArrowRight } from '@element-plus/icons-vue'
import GoodsHot from '@/views/GoodsDetail/components/GoodsHot.vue'
import { useCartStore } from '@/stores/modules/cart.js'
import { ElMessage } from 'element-plus'
import SkuItem from '@/components/SkuItem.vue'

const { goodsDetailInfo, goodsId } = useGoodsDetail()
const { goodsHotList } = useGoodsHot(goodsId.value, 1)
const imgIndex = ref(0)

// 放大镜功能
const target = ref()
const smallImg = ref()
const previewImg = ref()
const distance = ref({
  top: 0,
  left: 0,
})

const { elementX, elementY, isOutside } = useMouseInElement(target)
watch([elementX, elementY, isOutside], () => {
  if (isOutside.value) return
  //滑块的高度和宽度
  const smallWidth = smallImg.value?.offsetWidth
  const smallWidthTwo = smallWidth / 2
  const smallHeight = smallImg.value?.offsetHeight
  const smallHeightTwo = smallHeight / 2
  // 有效范围内控制滑块距离
  // 横向
  if (elementX.value >= smallWidthTwo && elementX.value <= smallWidthTwo * 3) {
    distance.value.left = elementX.value - smallWidthTwo
  }
  // 纵向
  if (elementY.value >= smallHeightTwo && elementY.value <= smallHeightTwo * 3) {
    distance.value.top = elementY.value - smallHeightTwo
  }

  // 处理边界距离
  if (elementX.value >= smallWidthTwo * 3) {
    distance.value.left = smallWidthTwo * 2
  }
  if (elementX.value <= smallWidthTwo) {
    distance.value.left = 0
  }
  if (elementY.value >= smallHeightTwo * 3) {
    distance.value.top = smallHeightTwo * 2
  }
  if (elementY.value <= smallHeightTwo) {
    distance.value.top = 0
  }
})

//购物车
const cartStore = useCartStore()
const demoRef = ref()
const addCart = () => {
  if (!demoRef.value.skuInfo) {
    ElMessage('请先选择规格')
    return
  }
  const cartGoods = demoRef.value.skuInfo
  let attrsText = ''
  cartGoods.specs.forEach((item, index) => {
    attrsText += item.name + '：' + item.valueName
  })
  cartStore.addCart({
    goodsId: goodsDetailInfo.value.id,
    name: goodsDetailInfo.value.name,
    picture: goodsDetailInfo.value.mainPictures[0],
    skuId: cartGoods.id,
    attrsText: attrsText,
    specs: demoRef.value.skuInfo.specs,
    nowPrice: demoRef.value.skuInfo.price,
    count: 1,
  })
  ElMessage('加入成功')
}
</script>
<template>
  <div class="goods-detail w" v-if="goodsDetailInfo">
    <div class="breadcrumb">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item
          :to="{ path: `/category/${goodsDetailInfo.categories[0].parent.id}` }"
          >{{ goodsDetailInfo.categories[0].parent.name || '' }}</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: `/category/${goodsDetailInfo.categories[0].id}` }">{{
          goodsDetailInfo.categories[0].name || ''
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ goodsDetailInfo.name || '' }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="goods-main w">
      <div class="goods-wrap">
        <div class="goods-image">
          <div class="preview" ref="previewImg">
            <el-image
              ref="target"
              class="el-image"
              :src="goodsDetailInfo.mainPictures?.[imgIndex]"
              fit="fill"
            />
            <div
              ref="smallImg"
              class="small-img"
              v-show="!isOutside"
              :style="{ left: `${distance.left}px`, top: `${distance.top}px` }"
            ></div>
          </div>
          <div class="spec-list">
            <ul>
              <li
                v-for="(mainPicture, index) in goodsDetailInfo.mainPictures"
                :key="index"
                @mouseenter="imgIndex = index"
              >
                <el-image
                  :class="{ 'el-image': true, active: imgIndex === index }"
                  :src="mainPicture"
                  fit="fill"
                />
              </li>
            </ul>
          </div>
        </div>
        <div class="goods-adve">
          <div class="adve-item">
            <p class="title">销量人气</p>
            <p class="num">{{ goodsDetailInfo.salesCount }}</p>
            <p class="icon">
              <span class="iconfont icon-qizhi"></span>
              销量人气
            </p>
          </div>
          <div class="adve-item">
            <p class="title">商品评价</p>
            <p class="num">{{ goodsDetailInfo.commentCount }}</p>
            <p class="icon">
              <span class="iconfont icon-chakan"></span>
              查看评价
            </p>
          </div>
          <div class="adve-item">
            <p class="title">收藏人气</p>
            <p class="num">{{ goodsDetailInfo.commentCount }}</p>
            <p class="icon">
              <span class="iconfont icon-shoucang"></span>
              收藏商品
            </p>
          </div>
          <div class="adve-item">
            <p class="title">品牌信息</p>
            <p class="num">{{ goodsDetailInfo.brand?.name }}</p>
            <p class="icon">
              <span class="iconfont icon-fengche"></span>
              品牌主页
            </p>
          </div>
        </div>
      </div>
      <div class="itemInfo-wrap">
        <div class="goods-info">
          <div class="goods-info-base">
            <h3 class="title">{{ goodsDetailInfo.name }}</h3>
            <span class="desc">{{ goodsDetailInfo.desc }}</span>
            <div class="price">
              <span class="price1">¥</span>
              <span class="price2">{{ goodsDetailInfo.price }}</span>
              <span>&nbsp;&nbsp;&nbsp;</span>
              <span class="price3 del">¥</span>
              <span class="price4 del">{{ goodsDetailInfo.oldPrice }}</span>
            </div>
          </div>
          <div class="goods-info-server">
            <dl>
              <dt>促销</dt>
              <dd>12月好物放松，App领券购买直降120元</dd>
            </dl>
            <dl>
              <dt>服务</dt>
              <dd>
                <span class="iconfont icon-dian"></span>
                无忧退货
              </dd>
              <dd>
                <span class="iconfont icon-dian"></span>
                快速退款
              </dd>
              <dd>
                <span class="iconfont icon-dian"></span>
                免费包邮
              </dd>
              <dd>
                <a href="#">了解详情</a>
              </dd>
            </dl>
          </div>
          <div class="goods-info-sku">
            <SkuItem
              ref="demoRef"
              :specs="goodsDetailInfo.specs"
              :skuList="goodsDetailInfo.skus"
            ></SkuItem>
          </div>
        </div>
        <div class="btn">
          <el-button @click="addCart">加入购物车</el-button>
        </div>
        <div
          class="large-img"
          v-show="!isOutside"
          :style="{
            backgroundImage: `url(${goodsDetailInfo.mainPictures?.[imgIndex]})`,
            backgroundPositionX: `-${distance.left * 2}px`,
            backgroundPositionY: `-${distance.top * 2}px`,
          }"
        ></div>
      </div>
    </div>
    <div class="goods-details">
      <div class="goods-info">
        <p>商品详情</p>
        <div class="spec">
          <dl v-for="item in goodsDetailInfo.details.properties">
            <dt>{{ item.name }}</dt>
            <dd>{{ item.value }}</dd>
          </dl>
        </div>
        <div class="detail-image">
          <ul>
            <li v-for="item in goodsDetailInfo.details.pictures">
              <img v-img-lazy="item" alt="" />
            </li>
          </ul>
        </div>
      </div>
      <div class="goods-hot">
        <div>
          <GoodsHot title="24小时热榜" :goods="goodsDetailInfo.hotByDay" />
        </div>
        <div>
          <GoodsHot title="周热榜" :goods="goodsHotList" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.active {
  border: 1px solid $sucColor;
}

.goods-detail {
  .breadcrumb {
    .el-breadcrumb {
      height: 100%;
      line-height: 60px;
    }
  }

  .goods-main {
    background-color: white;
    display: flex;
    gap: 0 40px;

    .goods-wrap {
      flex: 1;

      .goods-image {
        display: flex;
        gap: 5px;

        .preview {
          flex: 5;
          position: relative;

          .el-image {
            width: 100%;
            height: 100%;
          }

          .small-img {
            width: 50%;
            height: 50%;
            background-color: rgba(0, 0, 0, 0.2);
            position: absolute;
          }
        }

        .spec-list {
          width: 60px;
          flex: 1;

          ul {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;

            li {
              .el-image {
                width: 100%;
              }
            }
          }
        }
      }

      .goods-adve {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: flex-start;

        .adve-item {
          font-size: 14px;
          flex: 1;
          width: 50px;

          .title {
            color: #9e9e9e;
            line-height: 33px;
            text-align: center;
          }

          .num {
            line-height: 33px;
            text-align: center;
            color: red;
          }

          .icon {
            line-height: 33px;
            text-align: center;
            color: black;

            .iconfont {
              color: #1dc779;
            }
          }
        }
      }
    }

    .itemInfo-wrap {
      flex: 1;
      position: relative;

      .goods-info {
        .goods-info-base {
          .title {
            font-size: 18px;
            width: 100%;
            line-height: 40px;
          }

          .desc {
            width: 100%;
            display: block;
            color: #979191;
            font-size: 12px;
            line-height: 12px;
          }

          .price {
            line-height: 40px;

            .price1 {
              color: red;
              font-size: 10px;
            }

            .price2 {
              color: red;
            }

            .price3 {
              color: #979191;
              font-size: 10px;
            }

            .price4 {
              color: #979191;
              font-size: 12px;
            }
          }
        }

        .goods-info-server {
          background-color: #f3f3f3;
          padding-left: 10px;
          width: 75%;

          dl {
            height: 40px;
            display: flex;
            gap: 20px;
            line-height: 40px;

            dt {
              color: #979191;
            }

            dd {
              display: flex;
              align-items: center;
              justify-content: center;

              span {
                color: #1dc779;
                font-size: 16px;
              }

              a {
                color: #1dc779;
              }
            }
          }
        }
        .goods-info-sku {
        }
      }

      .btn {
        margin-top: 40px;
        height: 200px;
      }

      .large-img {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        background-color: rgba(0, 0, 0, 0.2);
        background-repeat: no-repeat;
        background-size: 200% 200%;
        background-color: white;
      }
    }
  }

  .goods-details {
    margin-top: 20px;
    display: flex;
    gap: 10px;

    .goods-info {
      flex: 5;
      background-color: white;

      p {
        height: 45px;
        border-bottom: 1px solid #9e9e9e;
        line-height: 50px;
        font-size: 18px;
        font-weight: 600;
      }

      .spec {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        justify-content: center;
        dl {
          width: 45%;

          display: flex;
          align-items: center;
          gap: 0 10px;

          dt {
            width: 20%;
            height: 100%;
          }

          dd {
            width: 80%;
          }
        }
      }

      .detail-image {
        margin-top: 20px;
      }
    }

    .goods-hot {
      flex: 2;
      background-color: white;
      justify-items: center;

      div {
        width: 170px;
      }
    }
  }
}
</style>
